JavaScript Drum Kit

今天是一個簡單的鍵盤監聽事件，當按到對應的鍵盤時，會有css的變化，和聲音播放．
原本影片是放入爵士鼓的聲音，但我個人後來有發現有趣的Web Audio API，就自己做了變化ＸＤ，並研究了一下基本的操作．

附上最終成品圖
以及個人codepen

技巧點

1. addEventListener() 綁定監聽、removeEventListener() 移除監聽

• 有監聽事件，記得也要有移除監聽的事件，不然監聽事件會一直存在，可能造成效能上的過度消耗．
• 監聽的事件非常多樣，不知道有什麼事件可以監聽的話，我都直接看w3c school，都整理好了，還有說明，可惜是英文的（誤）

window.addEventListener(要監聽的事件行為, 放入你的函式);
// 監聽的事件行為有很多，常見的有click、submit、scroll等等...

window.addEventListener("keyup", function(e) {
    console.log(e)
});
window.removeEventListener("keyup", function(e) {
    console.log(e)
});

當你觸發鍵盤事件時，就可以得到這個事件的很多參數：
其中的type: 'keyup' 就是觸發的事件， key: 'f'則是我按下的鍵盤對應的英文字

2. 事件keydown、keypress、keyup

• 三種事件使用上有一些差異，如下：

3. data-?自定義的屬性名稱

• ?號為你可以自己隨便命名的英文（只能小寫英文！）（不能使用xml當開頭！）（不能包含任何分號！），舉例: <div class="home" data-test="hello"></div>
  上面的test則是我自己命名的屬性名稱！
• 示範如何取出data-test的值

<div class="home" data-test="hello"></div>
const home = document.querySelector(".home");
home.dataset.test; // 預期可以拿到hello

• 總結：取值起手式 dataset.你命名的名稱 (不要遺忘那個小點點.)
  可以預先將你想要的東西埋入在html tag中，當觸發事件時，拿出來判斷使用．

4. classList 取得指定元素的class名稱

<div class="test">測試用元素</div>
const test = document.querySelector(".test");

5. Web Audio API

這部分使用上滿複雜的，也是參考其他人的文章去簡單認識，有興趣了解原理過程的可以點我

心得

是一個不用太費時可以完成的小練習，也從中再次認識網頁中的事件有哪些可以拿來監聽．想了解更深入的部分就可以去翻找文件，或是找前人分享的文章，說不定有一些意外的小收穫哦～＾＾